<template>


  <div class="login">
    <el-container>
      <el-aside width="50%">
        <svg class="logo" viewBox="0 0 128 128" width="440" height="440" data-v-11f596fd=""><path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z" data-v-11f596fd=""></path><path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z" data-v-11f596fd=""></path></svg>
        <div id="animitaionLogo" ></div>
      </el-aside>
      <el-main>
        <el-row>
          <el-col :span="5" ><i-user size="40" theme="outline"/>&nbsp;&nbsp;</el-col>
          <el-col :span="10"><el-input
              v-model="userId"
              class="w-50 m-2"
              size="large"
              placeholder="请输入账号"

          /></el-col>
        </el-row>
        <el-row><el-col :span="24">&nbsp; </el-col></el-row>
        <el-row>
          <el-col :span="5" ><i-lock theme="outline" size="40" />&nbsp;&nbsp;</el-col>
          <el-col :span="10"><el-input
              v-model="userPwd"
              class="w-50 m-2"
              size="large"
              placeholder="请输入密码"

          /></el-col>
        </el-row>
        <el-row><el-col :span="24">&nbsp; </el-col></el-row>
        <el-row>
          <el-col :span="5">&nbsp;</el-col>
          <el-col :span="10">
            <el-button size="large" @click="login" class="loginBtn">登陆</el-button>
          </el-col>



        </el-row>
      </el-main>
    </el-container>
  </div>


</template>

<script>
import "@/css/imitateWechat/imitateWechat.css";
import {ElMessage} from "element-plus";
import * as echarts from 'echarts';
export default {
  name: "Login",
  data(){
    return{
      userId:"",
      userPwd:"",
      logo:null
    }
  },
  mounted() {
    let now=new Date();
    this.userId="F"+(now.getTime()+'').substring(6);
    this.initLogo();
  },
  methods:{
    login(){
      /*
      this.$axios.get('/phmApi/login/loginUser?userid='+this.userid+"&psw="+this.userpwd,{
      }).then(res=>{
        //console.log("res",res.data)
        if(res.data=="error"){
          //alert("工號或者密碼錯誤！")
          ElMessage({message:"工號或者密碼錯誤！",type:"error"})
        }
        else{

          sessionStorage.setItem('userLogin',true)
          sessionStorage.setItem('username',res.data.username)
          sessionStorage.setItem('userid',res.data.userid)
          sessionStorage.setItem('user_role',res.data.role_name)
          ElMessage({message:"登陸成功頁面即將跳轉！",type:"success",duration:490})
          setTimeout(()=>{this.$router.push("map")},500)

        }

      }).catch(err=>{
        console.log("登陸異常："+err)
      });
      */
      sessionStorage.setItem("userId",this.userId);
      setTimeout(()=>{this.$router.push("chatMain")},500)

    },
    initLogo(){
      this.logo=echarts.init(document.getElementById('animitaionLogo'));
      let logOption = {
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: 'Apache ECharts',
                fontSize: 80,
                fontWeight: 'bold',
                lineDash: [0, 200],
                lineDashOffset: 0,
                fill: 'transparent',
                stroke: '#000',
                lineWidth: 1
              },
              keyframeAnimation: {
                duration: 3000,
                loop: false,
                keyframes: [
                  {
                    percent: 0.7,
                    style: {
                      fill: 'transparent',
                      lineDashOffset: 200,
                      lineDash: [200, 0]
                    }
                  },
                  {
                    // Stop for a while.
                    percent: 0.8,
                    style: {
                      fill: 'transparent'
                    }
                  },
                  {
                    percent: 1,
                    style: {
                      fill: '#42b883'
                    }
                  }
                ]
              }
            }
          ]
        }
      };
      if (logOption && typeof logOption === "object") {
        this.logo.setOption(logOption, true);
        //this.allDevBar.hideLoading();
      }
    }
  }
}
</script>

<style scoped>

</style>